let $ = (el) => document.querySelector(el),
    gets = (el) =>document.querySelectorAll(el),
   
    headerFixed = $('.headerFixed'),
    floorNav = $('.floorNav'),
    content = $('.content'),
    list = [...floorNav.children],
    divs = [...gets('.content>div')],
    curId;
// 给滚动条设置事件
window.addEventListener('scroll',() => {
    let num = document.documentElement.scrollTop,
        nav_top = $('.nav').offsetTop,
        content_top = $('.content').offsetTop -400;
    headerFixed.style.display = num >= nav_top ? 'block' : 'none';
    floorNav.style.display = num >= content_top ? 'block' : 'none';
    // 遍历content下的所有div
    divs.forEach((div,id) => {
        if(div.offsetTop -400 <= num ) curId = id
        active()
    })
});

list.forEach((li,index)=> {
    li.addEventListener('click',(e) => {
        curId = index;
        let pos = content.offsetTop;
        active();
        console.log(index)
        for(let i = 0;i < curId ;i++){
            pos += divs[i].offsetHeight;
        }
        document.documentElement.scrollTop = pos;
        
    })
})
// 封装高亮函数
function active(){
    let activeEl = $('.active');
    activeEl && activeEl.classList.remove('active');
    list[curId].classList.add('active');
}

// 给floorNav设置点击事件
